import { Swiper, SwiperItem, Image, View } from "@tarojs/components";
import { FC, useState } from "react";
import Taro from "@tarojs/taro";
import styles from "./index.module.less";
import { UserInfo } from "@/service/type";

interface IProps {
  customerInfo: UserInfo;
}

const SwiperBanner: FC<IProps> = () => {
  const [current, setCurrent] = useState<number>(0);

  /**预览 */
  const onPreview = () => {
    Taro.previewImage({
      current: require("@/assets/img/banner1.png"),
      urls: [require("@/assets/img/banner1.png")],
    });
  };

  return (
    <View className={styles["banner-wrapper"]}>
      <Swiper
        className={styles["banner-content"]}
        indicatorDots
        indicatorColor="#fff"
        indicatorActiveColor="#e1e1e1"
        onChange={(e) => setCurrent(e.detail.current)}
      >
        <SwiperItem className={styles["item"]}>
          <Image
            mode="widthFix"
            className={styles["img"]}
            src={require("@/assets/img/banner1.png")}
          ></Image>
        </SwiperItem>
        <SwiperItem className={styles["item"]}>
          <Image
            mode="widthFix"
            className={styles["img"]}
            src={require("@/assets/img/banner1.png")}
            onClick={() => onPreview()}
          ></Image>
        </SwiperItem>
      </Swiper>
      <View className={styles["count"]}>{current + 1}/2</View>
    </View>
  );
};

export default SwiperBanner;
